<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :append-to-body="true"
    class="preset-filter-dialog small-common-dialog-size"
    width="450px">
    <div @click.stop="() => {}">
      <div class="py-24">
        <Title title="快捷筛选设置" style="margin-bottom:10px;"/>
      </div>
      <div class="main">
        <template v-if="curFilterList && curFilterList.length">
          <div v-for="(item) in curFilterList" :key="item.id" :class="{'hover-item': !isEdit(item.id)}" class="config-item">
            <div class="label-container">
              <div v-if="isEdit(item.id)" class="edit-input">
                <el-input
                  v-model="editMode[item.id]"
                  :maxlength="30"
                  class="w-200px"
                  placeholder="请输入名称"
                  size="small" />
                <el-button :disabled="item.isFixed" class="ok-btn" type="primary" size="small" @click="toSave(item)">保存</el-button>
                <el-button :disabled="item.isFixed" class="cancel-btn-style ok-btn" size="small" @click="cancelEdit(item.id)">取消</el-button>
              </div>
              <ToolTip
                v-else
                :content="item.filterName || handelText(item.labelList).shortText"
                :tool-tip="handelText(item.labelList).longText"
                :label-style="{color: '#333'}"
                dangerously-use-html
              />
            </div>
            <div v-if="!isEdit(item.id)" class="preset-operate">
              <div :class="{'active': item.default, 'disabled': item.isFixed }" class="default-tag">
                <div class="label">默认</div>
                <el-switch :value="item.default" :disabled="item.isFixed" @change="setDefault(item)" />
              </div>
              <div :class="{'disabled': item.isFixed}" class="button-text ml-16" @click="toSetEditMode(item)">
                <img :src="EditIcon" class="operate-icon" alt="" >
              </div>
              <div :class="{'disabled': item.isFixed}" class="button-text ml-16" @click="deleteItem(item)">
                <img :src="DeleteIcon" class="operate-icon" alt="">
              </div>
            </div>
          </div>
        </template>
        <EmptyPlaceholder v-else image-size="100px" empty-img-top="40px" />
      </div>
    </div>
  </el-dialog>
</template>
<script>
import Title from '@/components/Title';
import { showModal } from '@/utils/message';
import { handelText } from './util';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import EditIcon from '@/assets/config/editIcon.png';
import DeleteIcon from '@/assets/config/deleteIcon.png';

export default {
  components: { Title, EmptyPlaceholder },
  props: {
    curFilterList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      EditIcon, DeleteIcon,
      dialogVisible: false,
      editMode: {}
    };
  },
  methods: {
    handelText,
    openDialog(item = null) {
      if (item && item.id) {
        this.toSetEditMode(item);
      }
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
      this.editMode = {};
      this.$emit('handelClose');
    },
    deleteItem(item) {
      if (item && item.isFixed) return;
      showModal('是否删除该条快捷筛选？').then(_ => {
        this.$emit('deleteItem', item);
      });
    },
    isEdit(id) {
      return Object.hasOwnProperty.call(this.editMode, id);
    },
    toSetEditMode(item) {
      if (item && item.isFixed) return;
      this.$set(this.editMode, item.id, item.filterName || '');
    },
    toSave(item) {
      this.$set(item, 'filterName', this.editMode[item.id] || '');
      this.cancelEdit(item.id);
      this.$emit('toSave');
    },
    cancelEdit(id) {
      delete this.editMode[id];
      this.$forceUpdate();
    },
    setDefault(item) {
      if (item && item.isFixed) return;
      this.$emit('setDefault', item.default ? null : item);
    }
  }
};
</script>
<style scoped lang="scss">
.config-item {
  display: flex;
  align-items: center;
  font-size: 14px;
  height: 40px;
  padding: 0 24px 0 34px;
  &.hover-item:hover {
    background-color: #F3F5FB;
  }
}
.py-24 {
  padding: 0 24px;
}
.operate-icon {
  width: 18px;
  height: 18px;
}
.main {
  max-height: 500px;
  @include scrollBar($x: hidden, $y: auto, $width: 6px);
}
.label-container {
  display: flex;
  width: 0%;
  flex: 1;
}
.preset-operate {
  display: flex;
  align-items: center;
  .button-text {
    display: flex;
    align-items: center;
  }
}
.ml-16  {
  margin-left: 16px;
}
.default-tag {
  font-size: 14px;
  display: flex;
  align-items: center;
  color: #333333;
  .label {
    margin-right: 4px;
  }
  &.active {
    border-color: #406eff;
    color: #406eff;
  }
}
.disabled {
  opacity: 0.5;
}
.w-200px {
  width: 200px;
}
.edit-input {
  display: flex;
  .ok-btn {
    margin-left: 12px;
    width: 56px;
    padding: 0;
    text-align: center;
  }
}
</style>
<style lang="scss">
.preset-filter-dialog {
  .el-dialog__body {
    padding: 24px 0 24px 0 !important;;
  }
}
</style>
